ヘッダーとCSS

ヘッダーにロゴを貼って、色をつけて

HTMLとロゴとCSSの準備はいいですか

飯田いいとこ←今日の課題。これをコピーして同じフォルダへ保存する。
　右クリックでページのソースを開いて、コピーすれば良いです。
　あとは，全部を指定して、コピーして、black.cetsで何も書いてない新しいページを開いて貼り付けて
　tekitounanamae.html　(名前は適当、拡張子はhtml) で保存すれば良いのです。
a4.zip へのリンク←またはこれを保存解凍してもできます。
ロゴ画像は

ですが他の画像でもOKです。
ロゴの名前はtitle-logo.pngですが、これもあなたのロゴの名前でいいのです。
拡張子が.orgでないとか、他の名前になっている人は後述するようにＨＴＭＬを自分の画像の名前にします。
自分で好きなロゴにしましょう。

ロゴを表示しましょう

ヘッダーとヘッダーの間に画像をのせるには、HTMLに次のようにかきます。

 $<header>
  <img src="title-logo.png" alt="いいだにおいで">
  </header>$

イメージタグには、終了のタグはありません。</img>はありません。
改行タブの<br>のように、終わりのタグのないものもあるのです。
<img src="title-logo.png" alt="いいだにおいで">
<要素名属性=”値”>という順番で書きます。
<
img　　　・・・（要素名)
src　　　・・・（属性）
=
"title-logo.png" ・・・（値）
>
ここでは、<要素名属性=”値” 属性=”値”>と属性が2つあります。
（属性と言いますがプロパティじゃないのかい？よくわからんけれど、統一してほしいな。）
img src="title-logo.png" width="154" height="28" alt="いいだにおいで">
と、幅と高さを欠いた方がいいと言われます。
幅と高さは、人によって違うでしょう、画像にマウスを重ねると表示されます。調べて自分の画像の幅と高さを欠きましょう。（違う数値を書くと、その幅や高さに変更されて表示されます。）

ロゴにリンクを張りましょう

これにリンクを張ります
リンクは<a>タグを使います。
<ａ>タグと</a>タグの中にイメージを囲いれると。イメージからのリンクができます。
文字を入れれば文字へのリンクになるのです。
　はアンカーの頭文字です。アンカーは｢くさり｣ですから、ここに書かれているのが何か鎖でつながれているというイメージでしょうか。

 $<a href="index.html">
        <img src="title-logo.png" width="154" "28" alt="いいだにおいで">
     </a>$

ですが

 $<a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>$

と、1行にしてもかまいません。

ヘッダーの幅と色

このままではヘッダーかどうか分かりません。
今度は学習のために、ＣＳＳで色をつけてみましょう。
（CSSは、/* */がコメントです。コメント部分を消してみましょう。）
main.csを開いて、現在書いてあるその下へ

 $header{
    height: 65px;
    width: 100%;
    background-color: yellow;
}$

と書いてみて下さい。
header{　　　　　　・・・・・・(セレクタといいます）ヘッダーについて書くよと宣言して
height: 65px; 　　・・・・・・(プロパティ：値；)高さｗｐ６５ピクセル
width: 100%;　　　・・・・・・(プロパティ：値；)幅を全体に
background-color: yellow;　　・(プロパティ：値；)色を黄色に
}
となっています。
色は適当な色に変えましょう。

ブラウザで見てみましょう

ブラウザで見てみましょう。
ロゴが左寄せされています。
ロゴを真ん中に持ってきたい、そんなときＣＳＳが活躍します。

ＨＴＭＬの中にマークをつける

次のリンクを張った画像を中央寄せしたい、

 $<a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで">$

そういうときは、HTMLのこのタグへＣＳＳ用のマークをつけます。

 $<div class="logo">
             <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>$

]]>

マークをつけておくとき活躍するのが<div></div>タグです。
HTMLを書き換えましょう。
divタグだけでは、何も意味がありません、けれど、<div>で囲むと、ブロック要素といってその中を一つの塊として扱えます。
そしてそこのブロックへ、class="logo" と、ここではlogoという名前をつけました。
タグのかたまりをかこみ（ブロック）、どこかのクラスに入れる。（class="なんちゃら"）、なんだか学校みたいですね。
次にCSSで
例えば「このクラスは皆帽子をかぶれ」などと決まりを当てはめるのです。

CSSで中央寄せ（センタリング）

これまで、タグに属性（性質）を持たせるときは
h1｛なんちゃら：かんちゃら；｝
とそのままタグ名につなげて書き込んでいました。
クラスの場合はちょっとちがいます。
頭にドットをつけてクラスを指定します。
ドット＋クラス名｛
　　　属性：値；
｝
となります。

 $.logo{
    text-align:center;
}$

ドット＋ロゴクラス｛
　　　テキストの位置：真ん中；
｝
というふうになるのです。
そして保存してブラウザを見ると

ロゴの位置を一寸下げる

ロゴが真ん中によっています。一寸下へ下げたいですね。
そんなときは、ロゴクラスの中のイメージ君に一寸下がって並ぶという（属性）性質をつけます。

 $.logo{
    text-align: center;   
}
.logo img{
        margin-top: 5px;
}$

.logo img{　・・・・・・・ロゴクラスの中のイメージは　｛　ここから
　　　　　　　　　　　スペースで開けて中の項目を指定します。
margin-top: 5px;　・・・・トップからの余白という性質（プロパティ）を:＋コロン＋5px（値）にする＋セミコロン
}　・・・・・　｝　ここまで
となります。
これで、位置が少し下がれば、できあがりです。
いろいろ、CSSで飾るんだなぁと言うのが分かればOK。
覚えておいてもいいですがネットで調べれば見つかります。これであとからバックカラーを黒にすれば浮かび上がりますがそれは又後で。
★ロゴをサブホルダに入れた場合
ロゴなどの画像はサブホルダに入れておいた方が便利なことがおおいのです。
例えば、直下に「tekitounanamae」というホルダを作り（名前は半角・英数・アンダーバーならどんな名前でも可能）
そのなかに、topnogazo.jpg があるなら

イメージタグの始まり	画像の場所と名前	説明（省略可能）	終わり
<img	src="title-logo.png"	alt="飯田においでのロゴ"	>
<img	src="tekitounanamae/topnogazo.jpg		>

とかきかわります。

できあがりはこうなります。、

飯田いいとこ
HTML index.html
　cssがhtmlと同じフォルダーにありmain.cssという名前の場合

 $<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="，で切って、キーワードを並べる">
<meta name="description" content="ページの内容を短く書く">
<link rel="stylesheet" href="main.css">
<title>飯田いいとこ</title>
</head>
<body>
    <header>
        <div class="logo">
        <a href="index.html">
            <img src="title-logo.png" width="154" "28" alt="いいだにおいで">
        </a>
        </div>
</header> 
    <h1>飯田いいとこ</h1>
    <footer>
    </footer>
</body>
</html>$

CSS main.css (H1は黒に戻しました。)

 $@charset "utf-8";
header{
height: 65px;
width: 100%;
background-color: yellow;
}
h1{
    color: black;
}
.logo{
    text-align: center;   
}
.logo img{
        margin-top: 5px;
}$

次の問題へ進む

ヘッダーを装飾してみよう